import React, { Component } from 'react'

import { useParams,useSearchParams,useLocation} from 'react-router-dom'
import qs from 'querystring'

//命名格式xxxWithRouter
function propsRouteWithRouter(PropsRoute) {
    return (props) => {
        let params = useParams();
        if(!params){
            const [search] = useSearchParams()
            const id =search.get('id')
            params.assign({id})
        }       
        // const search = qs.parse(useLocation().search.slice(1));
        // const state = useLocation().state;
        // params = Object.assign(params, search, state)
        return <PropsRoute {...props} params={params} />
    }
}

class PropsRoute extends Component {

    render() {
        /*
        react-router-dom v5 接收参数写法:
        this.props.match.params
        this.props.location.search
        this.props.location.state
        */
        // react-router-dom v6 接收参数写法
        // const search = window.location.search
        // console.log(qs.parse(search.slice(1)))
        //使用高级组件接收参数
        // console.log(this.props.params)
        const {children} = this.props
        return (
            <div>
                <h2>{children}---{this.props.params.id}</h2>
            </div>
        )
    }
}
export default propsRouteWithRouter(PropsRoute)

